import { Suspense } from "react"
import { Switch, Route, Redirect } from 'react-router-dom'
import { ROUTERTYPE } from '../types/router.d'
function RouterViews(props: ROUTERTYPE) {
    const routerList = props.routes && props.routes.filter((item) => !item.to);//筛选路由表
    const redirectList = props.routes && props.routes.filter((item) => item.to);//筛选路由表
    return (
        <Suspense fallback={<div>loading...</div>}>
            <Switch>
                {
                    routerList && routerList.map((item, index) => {
                        return (
                            <Route key={index} path={item.path} render={props => {
                                return (
                                    <item.component {...props} children={item.children}></item.component>
                                )
                            }}></Route>
                        )
                    })
                }
                {
                    redirectList && redirectList.map((item, index) => {
                        return (
                            <Redirect key={index} to={item.to as string} from={item.path}></Redirect>
                        )
                    })
                }
            </Switch>
        </Suspense>
    )
}

export default RouterViews